<script setup lang="ts">
import { ref, reactive, onMounted, computed, toRaw, watch, inject} from "vue";
import bus from "../tools/bus";
import { usePageType } from "../tools/usePageType";
import useVideo from "@/store/modules/video";
import type * as VideoType from "../type";
import * as VideoApi from "@/views/videoLabel/http/videoLabel";
const { isView, isEdit } = usePageType();
const videoStore = useVideo();

const addXZero = (n: number) => (n < 10 ? `0${n}` : n);
const setToolDisabled: any = inject('setToolDisabled')
const setSmallSign: any = inject('setSmallSign')
const setBigSign: any = inject('setBigSign')
const handleShowOrHide: any = inject('handleShowOrHide')
const setSingleColor: any = inject('setSingleColor')
const setFrameActive: any = inject('setFrameActive')
const setNidusActive: any = inject('setNidusActive')
const passiveAllSingle: any = inject('passiveAllSingle')
const singleClick: any = inject('singleClick')
const currentNidusThirdItem: any = inject('currentNidusThirdItem')

const props = defineProps({
  nidusList: {
    type: Array<VideoType.NidusItem>,
    default: () => {
      return [];
    },
  },
  currentSeriesUid: {
    type: [Number, String],
    default: "",
  },
  selectItem: {
    type: Function,
    default: () => {},
  },
  collapsed: {
    type: Boolean,
    default: false
  },
});
//帧段病灶计数
const nidusTotal:any = computed(() => {
  let total = 0;
  const item: any = props.nidusList.find(
    (item: any) => item.id === props.currentSeriesUid
  );
  if( item ){
    item.child.forEach((subItem: VideoType.NidusSubItem) => {
      total += subItem.child.length;
    })
  }
  return total;
});

const nidusToggleShowOrHide = ( index:number, subIndex: string | number, thirdIndex: number | null ) => {
	bus.emit("NidusList.nidusToggleShowOrHide", [index, subIndex,thirdIndex]);
};

const toggleNidusItemHide = ( index:number ) => {
  bus.emit("NidusList.toggleNidusItemHide", [index]);
}

const del = ( index:number, subIndex: string | number, thirdIndex: number | null) => {
  if (isView) return;
  bus.emit("NidusList.removeNidus", [index, subIndex,thirdIndex]);
};

const subMenuClick = (index: number, subIndex:string | number, thirdIndex:number, thirdItem: VideoType.NidusThirdItem) => {
  props.selectItem(index, subIndex, thirdIndex, "clickNidus");
};

//选择大征象
function selectedBigSign(index:number) {
  bus.emit("NidusList.selectedBigSign", index);
}

function changeIsOpen(index:number, subIndex: string|number){
  bus.emit("NidusList.changeIsOpen", [index, subIndex]);
}

function changeSubItemActive(index:number, subIndex: string|number, isActive: boolean){
  bus.emit("NidusList.changeSubItemActive", [index, subIndex, isActive]);
}

function getSubItemClass(subItem:VideoType.NidusSubItem){
  let className = "menu ";
  if( subItem.isOpen ) className += "is-open ";
  if( subItem.isActive ) className += 'is-acitve ';
  return className;
}
//帧段标注||单帧
const tabClick = (type: string) => {
  //todo 清空选中态
  if(type === 'multi'){
    const activeItem = videoStore.getActiveSingleItem()
    activeItem && singleItemClick(props.currentSeriesUid, activeItem.id, activeItem)
  }else{//有选中的反选,帧段也反选
    if(currentNidusThirdItem.value && currentNidusThirdItem.value.isActive){
      //失活病灶项
      singleClick(currentNidusThirdItem.value.data.uuid)
    }
    //清空帧段状态
    const index = props.nidusList.findIndex((item: any) => item.id === props.currentSeriesUid);
    setFrameActive(index, 0)
  }
  //
  videoStore.activeAnnoTab = type;
  setToolDisabled()
}
const tabClass = (type: string)=>{
  return type === videoStore.activeAnnoTab? 'active-tab' : 'default-tab'
}
//当前序列的单帧列表数据
const currentSingleObj = computed(() => {
   return videoStore.singleAnnoList.find((item: any) => item.id === props.currentSeriesUid)
})
//点击单帧列表项
const singleItemClick = (sUid: any, id: any, thirdItem: any) => {
  //todo 失活当前序列的帧段列表的所有项，与单帧互斥
  /*const index = videoStore.getSingleSeriesIndexById(id)
  setFrameActive(index, 0, false)
  setNidusActive(index, 0, 0, false);*/
  //
  videoStore.setSingleSelected(sUid, id)
  //跳到对应图像
  bus.emit("VideoLabel.changeVideoIndex", {
    changeVideoIndex: thirdItem.labelIndex - 1,
    labelData: thirdItem.data,
  });
  if(thirdItem.isActive){
    //征象
    setSmallSign(thirdItem)
    // 框的颜色
    setSingleColor(thirdItem, true)
  }else{
    setBigSign();
    // 框的颜色
    setSingleColor(thirdItem, false)
  }
  setTimeout(()=>{
    bus.emit("NidusList.clickNidus", thirdItem);
  },200)
}
//单帧显示、隐藏
const singleEyeClick = (thirdItem: any) => {
  videoStore.toggleSingleHide(thirdItem.id)
  handleShowOrHide(thirdItem, thirdItem.hide)
}
//删除单帧
const delSingle = async (thirdItem: any) => {
  videoStore.delSingle(thirdItem.id)
  await VideoApi.deleteAnnoResult({
    id: thirdItem.id
  })
  bus.emit("VideoLabel.removeNidus", {
    thirdItem
  })
  if( thirdItem.isActive ){
    setBigSign();
  }
}
//
defineExpose({
  singleItemClick,
  tabClick
});
</script>

<template>
  <div class="video-nidusList">
    <div class="nidus-container">
      <div
        :class="item.id === currentSeriesUid ? 'item show' : 'item'"
        v-for="(item, index) in nidusList" :key="index"
      >
        <div class="sub-item sub-item-first">
          
          <i
            :class="item.hide
              ? 'iconfont icon-biyan'
              : 'iconfont icon-biyan1'"
            @click.stop="toggleNidusItemHide(index)"
          ></i>
          <span @click.stop="()=> selectedBigSign(index)" class="name">{{
            item.id
          }}</span>
        </div>
        <div style="width: 100%" class="tab-wrap">
          <a-row justify="space-between" style="width: 100%;text-align: center">
            <a-col :span="12" :class="tabClass('multi')" @click="tabClick('multi')">帧段标注</a-col>
            <a-col :span="12" :class="tabClass('single')" @click="tabClick('single')">单帧标注</a-col>
          </a-row>
        </div>
        <div
          v-if="videoStore.isMulti"
          :class="getSubItemClass(subItem)"
          v-for="(subItem, subIndex) in item.child"
        >
          <div
            class="menu-header"
            >
            <div class="left">
              <i
                :class=" subItem.isOpen ? 'iconfont icon-xiala' : 'iconfont icon-shouqi'"
                @click="changeIsOpen(index, subIndex)"
              ></i>
              <div @click="changeSubItemActive(index, subIndex, !subItem.isActive)" class="name">{{ `${subItem.name}-${addXZero(subIndex + 1)}` }}</div>
            </div>
            <div class="right">
              <a-popconfirm content="确定要删除帧段嘛？" @ok="() => del( index, subIndex, null)">
                <i
                class="iconfont icon-xiazaishanchu"
                v-show="!isView"
                ></i>
              </a-popconfirm>
              <i
                :class="
                  subItem.hide
                    ? 'iconfont icon-biyan'
                    : 'iconfont icon-biyan1'
                "
                @click.stop="nidusToggleShowOrHide( index, subIndex, null)"
              ></i>
            </div>
          </div>
          <div
            v-for="(thirdItem, thirdIndex) in subItem.child || []"
            :key="`${subIndex}_${thirdIndex}`"
            :keyIndex="`${subIndex}_${thirdIndex}`"
            :class="thirdItem.isActive ? 'sub-menu active' : 'sub-menu'"
            @click="subMenuClick(index, subIndex, thirdIndex, thirdItem)"
          >
            <a-tooltip :content="`${thirdItem.nidusName}-${thirdItem.id}`" position="right">
              <span
                :class="thirdItem.alg ? 'name' : 'name hand-name'"
                :data-title="`${index}_${subIndex}_${thirdIndex}`"
                :id = "`${thirdItem.nidusName}-${thirdItem.id}`"
                >{{
                  `${thirdItem.nidusName}-${thirdItem.id}`
                }}</span
              >
            </a-tooltip>
            <div class="right">
              <a-popconfirm content="确定要删除病灶嘛？" @ok="() => del(index, subIndex, thirdIndex)">
                <i
                  class="iconfont icon-xiazaishanchu 123"
                  v-show="!isView"
                ></i>
              </a-popconfirm>
              <i
                :class="
                  thirdItem.hide
                    ? 'iconfont icon-biyan'
                    : 'iconfont icon-biyan1'
                "
                @click.stop="nidusToggleShowOrHide(index, subIndex, thirdIndex)"
              ></i>
            </div>
          </div>
        </div>
        <div v-if="videoStore.isSingle" class="menu is-open">
          <div
              v-for="(singleItem, singleIndex) in currentSingleObj.list"
              :key="`${index}_${singleIndex}`"
              :keyIndex="`${index}_${singleIndex}`"
              :class="singleItem.isActive ? 'sub-menu active' : 'sub-menu'"
              @click="singleItemClick(currentSingleObj.id, singleItem.id, singleItem)"
          >
            <a-tooltip :content="`${singleItem.nidusName}-${singleItem.id}`" position="right">
              <span
                  :class="singleItem.alg ? 'name' : 'name hand-name'"
                  :data-title="`${index}_${singleIndex}`"
                  :id = "`${singleItem.nidusName}-${singleItem.id}`"
              >{{
                  `${singleItem.nidusName}-${singleItem.id}`
                }}</span
              >
            </a-tooltip>
            <div class="right">
              <a-popconfirm content="确定要删除病灶嘛？" @ok="() => delSingle(singleItem)">
                <i
                    class="iconfont icon-xiazaishanchu 123"
                    v-show="!isView"
                ></i>
              </a-popconfirm>
              <i
                  :class="
                  singleItem.hide
                    ? 'iconfont icon-biyan'
                    : 'iconfont icon-biyan1'
                "
                  @click.stop="singleEyeClick(singleItem)"
              ></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="nidus-label">
      <!--<div class="nidus-label-text">图层标记 : {{ 0 }}</div>-->
      <div class="nidus-label-text">病灶标记 : {{ videoStore.isMulti?  nidusTotal : videoStore.currentSingleList.length }}</div>
    </div>
  </div>
</template>

<style lang="less">
.video-nidusList {
  width: 180px;
  height: calc(100vh - 108px);
  background-color: #18252f;
  position: relative;

  .menu{
    color: #fff;
    &.is-open{
      .sub-menu{
        display: flex;
      }
    }
    &.is-acitve{
      .menu-header{
        .left{
          .iconfont,
          .name{
            color: #67c9d5;
          }
        }
        
      }
      
    }
    .name{
      font-size: 12px;
    }
    .menu-header{
      display: flex;
      height: 34px;
      line-height: 34px;
      justify-content: space-between;
      padding: 0 7px 0 12px;
      
      .left{
        display: flex;
        .iconfont{
          margin-right: 8px;
        }
        .iconfont:before{
          font-size: 10px;
        }
        .name{
          padding-right: 26px;
        }
      }
      .right{
        display: flex;
        .iconfont{
          width: 22px;
          display: flex;
          justify-content: center;
        }
        .iconfont:before{
          font-size: 10px;
        }
      }
      
    }
    .sub-menu{
      padding-left: 20px;
      display: flex;
      justify-content: space-between;
      height: 34px;
      line-height: 34px;
      padding: 0 7px 0 32px;
      display: none;
      .name{
        text-overflow: ellipsis;
        width: 90px;
        overflow: hidden;
        white-space: nowrap;
      }
      .hand-name{
        color: #FAAD14;
      }
      &.active{
        background-color: #28353c !important;
        .name{
          color: #67c9d5 !important;
        }
      }
      .right{
        display: flex;
        .iconfont{
            width: 22px;
            display: flex;
            justify-content: center;
          }
          .iconfont:before{
            font-size: 10px;
          }
        }
      }
      
  }

  .nidus-container {
    overflow-y: scroll;
    width: 100%;
    height: calc(100vh - 171px);
    .tab-wrap{
      width: 100%;
      .active-tab{
        height: 22px;
        line-height: 22px;
        color: #67C9D5;
        background: #183547;
        text-align: center;
      }
      .default-tab{
        height: 22px;
        line-height: 22px;
        color: #ffffff;
        background: #0E1C24;
        text-align: center;
      }
    }
  }
  .arco-menu {
    background-color: #18252f;
    .thirdItem.arco-menu-selected,
    .thirdItem.active {
      background-color: #28353c !important;
      .name {
        color: #67c9d5 !important;
      }
    }
    .arco-menu-inline-header {
      background-color: #18252f !important;
      padding: 0;
      margin: 0;
      height: 34px;
      line-height: 34px;
      position: relative;
      padding-left: 30px;
      overflow: hidden;
      .arco-menu-icon-suffix {
        position: absolute;
        left: 10px;
        top: 0px;
        z-index: 2;
        right: 0;
        display: block;
        width: 14px;
        height: 14px;
        &.is-open {
          top: 20px;
        }
        .arco-icon {
          color: #fff;
        }
      }
    }
    .arco-menu-item {
      background-color: #18252f !important;
      line-height: 34px;
    }
    .arco-menu-title {
      display: block;
      width: 100%;
      height: 100%;
    }
    .arco-menu-icon-suffix {
    }
    .arco-menu-icon {
      display: none;
    }
    .arco-menu-inner {
      padding: 0;
    }
  }
  .item {
    cursor: pointer;
    display: none;
    &.show{
      display: block;
    }
    .sub-item.sub-item-first {
      padding: 0 12px 0 4px;
    }
    .sub-item {
      height: 36px;
      display: flex;
      align-items: center;
      padding-left: 8px;
      border-bottom: 1px solid #000;
      cursor: pointer;
      .name {
        color: #fff;
        display: inline-block;
        width: 142px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .iconfont {
        color: #fff;
        font-size: 12px;
      }
      .icon-biyan1 {
        padding: 0 6px;
        cursor: pointer;
      }
      .icon-biyan {
        padding: 0 6px;
        cursor: pointer;
      }
      .icon-xiazaishanchu {
        padding: 0 13px;
        cursor: pointer;
        font-size: 12px;
      }
    }
    .item-header {
      width: 100%;
      display: flex;
      .name {
        width: 105px;
        color: #fff;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .iconfont {
        color: #fff;
        font-size: 12px;
      }
      .icon-biyan1 {
        padding: 0 12px 0 5px;
        cursor: pointer;
      }
      .icon-biyan {
        padding: 0 12px 0 5px;
        cursor: pointer;
      }
      .icon-xiazaishanchu {
        padding: 0 5px;
        cursor: pointer;
        font-size: 12px;
      }
    }
    .thirdItem {
      padding: 0 0 0 30px;
      margin: 0;
      .arco-menu-indent-list {
        display: none;
      }
    }
  }
  .nidus-label {
    width: 100%;
    height: 64px;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 12px 12px 0 12px;
    border-top: 1px solid #000;
    .nidus-label-text {
      color: #fff;
      margin-bottom: 2px;
    }
  }
}
</style>
